<template>
  <a-modal
    :width="500"
    :visible="visible"
    title="一键确认收入"
    @cancel="onClose"
    ok-text="确定"
    :destroyOnClose="true"
    :confirmLoading="saveLoading"
    @ok="onSubmit"
  >
    <a-alert type="warning" style="margin-bottom: 10px; padding: 6px 10px; font-size: 12px">
      <template #description>
        <p>将确认选择月份之前 (含选择月份)的待确认收入</p>
      </template>
    </a-alert>
    <a-form layout="vertical">
      <a-row :wrap="true" :gutter="12">
        <a-col :span="24">
          <a-form-item label="截止月份" v-bind="validateInfos.month">
            <a-month-picker
              class="w-100p"
              v-model:value="formData.month"
              placeholder="请选择截止月份"
              :format="monthFormat"
              :valueFormat="monthFormat"
              :allowClear="true"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>

</template>
<script>
import { defineComponent, reactive, toRefs, computed, watch } from "vue";
import { Form, message } from "ant-design-vue";
import store from "../../../../store";
import request from "@/common/utils/request";
const useForm = Form.useForm;
import moment from "moment";
const monthFormat = "YYYY-MM";
export default defineComponent({
  name: "IncomeVerifyModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectedRowKeys: {
      type: Array,
      default: () => [],
    }
  },
  components: {},
  setup(props, { emit }) {
    const state = reactive({
      saveLoading: false,
    });

    const formData = reactive({
      month: moment().format(monthFormat),
    });
    const ruleRef = reactive({
      month: [{ required: true, message: "必选" }],
    });

    const { resetFields, validate, validateInfos} = useForm(formData, ruleRef);

    const onSubmit = () => {
      validate().then(() => {
        state.saveLoading = true;
        let data = props.selectedRowKeys.map((v) => {
          let info = v.split("&");
          return {
            contract_id: info[0],
            cost_type: info[1],
            owner_id: info[2],
          }
        })
        let params = {
          ...formData,
          data,
          needMsg: true,
        };
        request.post("/org", "/incomeConfirm/allIncomeConfirm", params).then((res) => {
          message.success(res.msg || "操作成功");
          state.saveLoading = false;
          emit("handleSuccess");
        }).finally(() => {
          state.saveLoading = false;
        });
      });
    };

    const onClose = () => {
      emit("handleCancel");
    };


    const init = () => {

    };

    const reset = () => {
      state.saveLoading = false;
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          resetFields();
          reset();
        }
      }
    );

    return {
      ...toRefs(state),
      formData,
      validateInfos,
      monthFormat,
      onClose,
      onSubmit,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-alert-description) {
  font-size: 12px;
  p {
    margin-bottom: 6px;
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}
</style>
